<template>
  <!-- 智能检索提示 -->
  <div
    v-show="searchTxt !== '' && (sqHistory.length > 0 || words.length > 0 || matchWords.length > 0)"
    ref="searchTips"
    class="search-tips"
  >
    <vue-scroll :ops="scrollOps">
      <div v-show="sqHistory.length > 0" class="tips-box">
        <div class="flex tip">
          <h6 class="tit">历史记录</h6>
          <h6 class="tit more" @click="handleMore">查看更多>></h6>
        </div>
        <p class="box">
          <span
            v-for="(item, index) in sqHistory"
            :key="index"
            @click="chooseTips({ key: item.key, isSearch: true })"
          >
            <span v-html="item.value"></span>
          </span>
        </p>
      </div>
      <div v-show="words.length > 0" class="tips-box">
        <h6 class="tit">关键词提示</h6>
        <p class="box">
          <span
            v-for="(item, index) in words"
            :key="index"
            @click="chooseTips({ key: item.key, isSearch: true })"
          >
            <span v-html="item.value"></span>
          </span>
        </p>
      </div>
      <div v-show="matchWords.length > 0" class="tips-box">
        <h6 class="tit">匹配提示</h6>
        <p class="box">
          <span
            v-for="(item, index) in matchWords"
            :key="index"
            @click="chooseTips({ key: item.key, isSearch: true })"
          >
            <span v-html="item.value"></span>
          </span>
        </p>
      </div>
    </vue-scroll>
  </div>
</template>

<script>
import axios from "axios";
import { wordLight } from "@/utils/utils";
export default {
  props: {
    searchTxt: {
      type: String,
    },
    vHeight: {
      // 自定义滚动条高度
      type: Number,
    },
  },
  data() {
    return {
      sqHistory: [],
      words: [],
      scrollOps: {},
      matchWords: [], //匹配提示
      type: "", //业务标识
    };
  },
  mounted() {
    if (this.$route.query.type) {
      this.type = String(this.$route.query.type)
    } else {
      this.type = "patent"
    }
    // this.type = String(this.$route.query.type);
    if (this.searchTxt !== "") {
      this.getSmartSearchTips();
    }
  },
  methods: {
    // 智能检索提示
    getSmartSearchTips() {
      let ths = this;
      let debounce = _.debounce(() => {
        if (ths.smartSearchTipsCancel) {
          ths.smartSearchTipsCancel();
        }
        ths
          .$get(
            `${ths.$Url.search.promptInfo}?loading=false`,
            {
              sq: ths.searchTxt,
              dbid: this.type,
            },
            new axios.CancelToken(function executor(c) {
              ths.smartSearchTipsCancel = c;
            })
          )
          .then((res) => {
            let data = res.data;
            if (data) {
              // 历史记录
              let sqHistory = [];
              data.sqHistory &&
                data.sqHistory.forEach((v, i) => {
                  if (i < 3) {
                    let text = wordLight(v, this.searchTxt);
                    if (this.searchTxt.indexOf("AND")) {
                      text = text.split("AND")[0];
                    }
                    if (this.searchTxt.indexOf("and")) {
                      text = text.split("and")[0];
                    }
                    sqHistory.push({
                      key: v,
                      value: text,
                    });
                  }
                });
              this.sqHistory = sqHistory;

              // 关键词匹配
              let matchWords = [];
              data.matchWords &&
                data.matchWords.forEach((v, index) => {
                  if (index < 3) {
                    let key = v.searchMsg;
                    let value = wordLight(v.displayMsg, this.searchTxt);
                    matchWords.push({
                      key,
                      value,
                    });
                    this.matchWords = matchWords;
                  }
                });
              // 关键词匹配
              let words = [];
              data.words &&
                data.words.forEach((v, index) => {
                  if (index < 3) {
                    let key = v.searchMsg;
                    let value = wordLight(v.displayMsg, this.searchTxt);
                    words.push({
                      key,
                      value,
                    });
                    this.words = words;
                  }
                });
            }
          })
          .catch((err) => {});
      }, 10);
      debounce();
    },
    chooseTips(obj) {
      this.$emit("chooseTips", obj);
    },
    handleMore(){
      this.$emit("moreHistory");
    },
  },
  watch: {
    $route() {
      if (this.$route.query.type) {
        this.type = String(this.$route.query.type)
      } else {
        this.type = "patent"
      }
    },
    searchTxt() {
      if (this.searchTxt !== "") {
        this.getSmartSearchTips();
      } else {
        this.sqHistory = [];
        this.words = [];
        this.matchWords = [];
      }
    },
  },
  beforeMount() {
    this.scrollOps = {
      vuescroll: {
        mode: "native",
        sizeStrategy: "number",
        detectResize: true,
        wheelScrollDuration: 200,
      },
      scrollPanel: {
        initialScrollX: false,
        initialScrollY: false,
        scrollingX: false,
        scrollingY: true,
        speed: 1000,
        // easing: 'easeInQuad',
        maxHeight: this.vHeight || 360,
      },
      rail: {
        size: "9px",
        gutterOfEnds: "10px",
        gutterOfSide: "0px",
        keepShow: true,
      },
      bar: {
        onlyShowBarOnScroll: false,
        keepShow: true,
        background: "#adc2ca",
        size: "9px",
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.search-tips {
  position: relative;
  top: 6px;
  left: 0;
  width: calc(100%);
  // height: calc(50vh);
  // max-height: 300px;
  // max-height: calc((100vh - 60px - 40px) / 1.5);
  padding: 0 10px;
  border: 2px solid $color141;
  border-radius: 8px;
  box-sizing: border-box;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.95);
  // overflow-x: hidden;
  // overflow-y: auto;
  z-index: 2;
  .tit {
    // height: 26px;
    line-height: normal;
    padding-left: 16px;
    margin-top: 20px;
    margin-bottom: 4px;
    font-weight: bold;
    font-size: 14px;
    color: $color6;
  }
  .tip {
    justify-content: space-between;
    .more:hover {
      cursor: pointer;
      color: $mainColor;
    }
  }
  .box {
    position: relative;
    line-height: 1.6;
    margin-top: 0;
    font-size: 14px;
    > span {
      display: block;
      line-height: 30px;
      padding: 0 16px;
      border-radius: 4px;
      cursor: pointer;
      &:hover {
        background-color: $color144;
      }
    }
  }
}
</style>
